<template>
	<view class="u-content">
		<view class="top">
			<view class="name">
				<text>发布人</text>
				<u-input placeholder='' v-model="userInfo.publisher" type="text" :border="border"
					:input-align="inputAlign" />
			</view>
			<view class="name">
				<text>手机号</text>
				<u-input placeholder='' v-model="userInfo.publisherPhone" type="text" :border="border"
					:input-align="inputAlign" />
			</view>
		</view>
		<view class="bottom">
			<view class="list">
				<view class="left">
					<text>*</text><text>联系地址</text>
				</view>
				<u-input placeholder='' v-model="userInfo.publisherAddress" type="text" :border="border"
					:input-align="inputAlign" />
			</view>
			<view class="list">
				<view class="left">
					<text>*</text><text>需求名称</text>
				</view>
				<u-input placeholder='' v-model="userInfo.demandName" type="text" :border="border"
					:input-align="inputAlign" />
			</view>
			<view class="list">
				<view class="left">
					<text>*</text><text>关联灾情</text>
				</view>
				<view class="pick">
					<picker :value="choosed" :range="logisticsType" :range-key="'disasterName'"
						@change="bindPickerChange">
						<view class="uni-input">{{logisticsType[choosed].disasterName}}</view>
					</picker>
					<image src="../../static/require/select.png" mode=""></image>
				</view>
			</view>
			<view class="goodsbox">
				<view class="list">
					<view class="left">
						<text>*</text><text>需要物资</text>
					</view>
					<view class="btn" @click="addGoods">
						<text>添加物资</text>
					</view>
				</view>
				<view class="goods" v-for="(item,index) in list" :key="index">
					<text>{{item.itemsName}}</text>
					<u-number-box v-model="item.itemsNum" @change="valChange"></u-number-box>
					<text class="text1">{{unitName[index]}}</text>
					<view class="delete" @click="remove(index)">
						<image src="../../static/require/move.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="picture">
				<view class="title">
					<text>求助照片</text><text>{{fileList.length}}/3</text>
				</view>
				<view class="">
					<u-upload max-count="3" max-size='10*1024*1024 ' :on-preview="handlePreview" :action="action"
						upload-text="选择图片" @on-remove="onRemove" @on-success="onSuccess"></u-upload>
				</view>
			</view>
			<view class="illustrate">
				<view class="title">
					求助说明
				</view>
				<textarea v-model="userInfo.helpExplain" class="cont" value="" placeholder="请您输入求助内容" />
			</view>
			<view class="info">
				请确保您提交的信息真实准确，提交后我们将进行审核。
			</view>
			<view class="sub" @click="subRequery">
				<text>确认提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitName: [], // 物资单位列表
				showLogisticsType: false,
				choosed: 0,
				logisticsType: [{
					disasterName: ''
				}],
				action: `${this.$basePath}/emergency_supplies/api/gft/comm/file/v1/upload?dir=image&storage=1`, // 图片上传位置
				value: 0,
				show: false,
				index: 0,
				fileList: [], // 上传文件列表
				userInfo: { // 信息
					publisherAddress: '',
					demandName: '',
					helpExplain: '',
					publisher: '张三',
					publisherPhone: '15663890254'
				},
				border: false,
				inputAlign: 'right', // input输入位置
				list: [{ // 物资信息列表
					itemsName: '',
					itemsNum: 0,
					itemsCode: '',
					unitCode: '',
				}]
			}
		},
		onLoad() {
			this.selectDisasterList() // 灾情列表
			this.selectDicList() // 字典
			this.list = uni.getStorageSync('list1') // 读取缓存
		},
		methods: {
			showLogistics() {
				this.showLogisticsType = true;
			},
			chooseLogistice(index) {
				this.choosed = index;
			},
			// 选择灾情
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.choosed = e.target.value
			},
			// 添加物资
			addGoods() {
				this.$gopage('/pages/bright/addSupplies')
				uni.setStorageSync('list1',this.list);
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 删除物资
			remove(index) {
				this.list.splice(index, 1); //删除index为i,位置的数组元素
			},
			handlePreview(file) {
				console.log(file);
			},
			onSuccess(data, index, lists) {
				this.fileList.push(data.data.url);
				console.log(this.fileList)
			},
			onRemove(index) {
				if (this.fileList.length > 2) {
					this.fileList.splice(index, 1);
				} else {
					this.fileList = [];
				}
			},
			selectDisasterList() {
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/disasterInfo/selectDisasterList',
					needAuth: true,
					contentType: 'application/json;charset=utf-8',
				}).then(res => {
					if (res.code == 200) {
						// this.donationNameList = res.data
						this.logisticsType = res.data
						// console.log(this.logisticsType)
					}
				})
			},

			selectDicList() {
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/donationHelpDemand/selectDicList?type=supplies_unit',
					method: 'POST'
				}).then(res => {
					for (let j in this.list) {
						for (let i in res.data) {
							if (this.list[j].unitCode == res.data[i].code) {
								this.unitName.push(res.data[i].name)
							}
						}
					}
				})
			},
			subRequery() {
				var that = this;
				var data = {
					publisherAddress: that.userInfo.publisherAddress, // 联系地址
					demandName: that.userInfo.demandName, // 需求名称
					// donationName: that.donationName,
					disasterName: this.logisticsType[this.choosed].disasterName, // 灾情名称
					disasterId: this.logisticsType[this.choosed].disasterId, // 灾情id
					helpExplain: that.userInfo.helpExplain, // 求助说明
					helpPic: that.fileList.toString(), // 求助图片
					donationHelpDemandInfoList: that.list, // 物资信息
					publisherPhone: that.userInfo.publisherPhone, // 发布人电话
					publisher: that.list.publisher, // 发布人姓名
					idCard: '622424199809393815' // idCard
				};
				if (data.publisherAddress == '') {
					uni.showToast({
						title: '联系地址不能为空！',
						icon: 'none'
					});
					return false;
				}
				if (data.demandName == '') {
					uni.showToast({
						title: '需求名称不能为空！',
						icon: 'none'
					});
					return false;
				}
				console.log(data)
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/donationHelpDemand/saveDemand',
					method: 'POST',
					// needAuth: true,
					data: data,
					// dataType: 'json',
					contentType: 'application/json'
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功！',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		// overflow: hidden;

		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		.top {
			background-color: #ffffff;

			.name {
				width: 85%;
				height: 100rpx;
				display: flex;
				align-items: center;
				margin-left: 50rpx;
				// margin-right: 150rpx;
				border-bottom: 1px solid #f5f5f5;
				justify-content: space-between;

				text {
					font-size: 32rpx;
					line-height: 100rpx;
					color: #333333;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			background-color: #ffffff;
			flex: 1;

			.goods {
				width: 95%;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				text {
					width: 40%;
					margin-left: 60rpx;
				}

				.text1 {
					width: 20rpx;
				}

				.delete {
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.illustrate {
				width: 95%;
				margin: 0 50rpx;

				.title {
					width: 85%;
					font-family: PingFang-SC-Medium;
					font-size: 32rpx;
					line-height: 114rpx;
					color: #333333;
				}

				.cont {
					width: 630rpx;
					height: 200rpx;
					background-color: #f5f5f5;
					border-radius: 6rpx;
					padding-top: 30rpx;
					padding-left: 30rpx;
				}
			}

			.form-item {
				display: flex;
			}

			.picture {
				width: 95%;
				margin: 0 50rpx;

				// height: 100rpx;
				.title {
					width: 85%;
					display: flex;
					justify-content: space-between;

					text:first-child {
						font-family: PingFang-SC-Medium;
						font-size: 32rpx;
						line-height: 114rpx;
						color: #333333;
					}

					text:last-child {
						font-family: PingFang-SC-Regular;
						font-size: 30rpx;
						line-height: 114rpx;
						color: #666666;
					}
				}
			}

			.info {
				font-size: 24rpx;
				line-height: 42rpx;
				color: #fa1627;
				margin: 50rpx 50rpx;
			}

			.sub {
				width: 650rpx;
				height: 80rpx;
				background-color: #fe5745;
				border-radius: 10rpx;
				margin: 50rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 30rpx;
					line-height: 44rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
				}
			}

			.list {
				width: 85%;
				height: 100rpx;
				border-bottom: 1rpx solid #f5f5f5;
				font-family: PingFang-SC-Medium;
				font-size: 32rpx;
				line-height: 100rpx;
				color: #333333;
				margin: 0 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					text:first-child {
						font-family: PingFang-SC-Medium;
						font-size: 32rpx;
						line-height: 100rpx;
						color: #fa1627;
					}
				}

				.pick {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 16rpx;
						margin-left: 10rpx;
						// position: absolute;
					}
				}

				.btn {
					width: 210rpx;
					height: 60rpx;
					background-color: #fe5745;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-family: PingFang-SC-Medium;
						font-size: 28rpx;
						line-height: 114rpx;
						color: #fefefe;
					}
				}

				input {
					font-size: 28rpx;
					width: 70%;
				}
			}
		}
	}
</style>
